<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/layui/css/layui.css" />
  </head>
  <body>
    <div class="layui-container">
      <div id="demoRate"></div>
    </div>

    <script src="./assets/layui/layui.js"></script>
    <script>
      layui.use(["rate"], function () {
        var rate = layui.rate;
        var rateInst = rate.render({
          // rate 2.3.0+
          elem: "#demoRate", // 传元素选择器
          length: 990, // ⭐⭐个数
          value: 100.5, // 初始值
          theme: "red", // 主题色
          half: true, // 是否可以半⭐
          text: true, // 是否显示评分对应的内容
          setText: function (value) {
            // 1-4星对应的文字
            var arrs = {
              1: "极差",
              2: "差",
              3: "中等",
              4: "好",
            };
            this.span.text(arrs[value] || value + "星");
          },
          choose: function (value) {
            // 选择后的回调
            if (value > 4) alert("么么哒");
          },
          // readonly: true, // 只读
        });
      });
    </script>
  </body>
</html>
